<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin:0px;
        }
        .container{
            width:900px;
            height: 580px;
            border:1px solid black;
            position: relative;
            margin:10px auto;
        }
        .d1,.d2,.d3,.d4{
            width:360px;
            height: 190px;
            border:5px solid red;
            padding:10px;
            position: absolute;

        }
        .d1{
            top:40px;
            left: 30px;
        }
        .d2{
            top:40px;
            /*left:480px;*/
            right:30px;
        }
        .d3{
            /*top:320px;*/
            bottom:40px;
            left:30px;
        }
        .d4{
            /*top:320px;*/
            /*left:480px;*/

            right:30px;
            bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>

    </div>
</body>
</html>